import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
import { func } from 'prop-types'

export default function App() {

  function computedClassName({isActive}){
    console.log('isActive',isActive)
    return isActive ? 'list-group-item atguigu' : 'list-group-item'
  }

  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          {/* <Header/> */}
        </div>
      </div>

      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            <NavLink className={computedClassName} to="/about">About</NavLink>
            <NavLink className={computedClassName} to="/home">Home</NavLink>
          </div>
        </div>
      </div>

      <div className='col-xs-6'>
        <div className="panel">
          <div className="panel-body">
            {/*Switch关闭路由的多重匹配功能*/}
            <Routes>
              <Route path="/about" element={<About/>}/>
              <Route path="/home" element={<Home/>}/>
              <Route path="/" element={<Navigate to="/home"/>}/>
            </Routes>
          </div> 
        </div>
      </div>

    </div>
  )
}
